import React, { Component } from 'react'
// 引入过渡效果的依赖
import { CSSTransition } from 'react-transition-group'
// 引入对应的css
import './CssTransition.css'

export default class CssTransition extends Component {
  constructor() {
    super()
    this.state = {
      isShow: true,
      btnTxt: '隐藏'
    }
  }
  render() {
    return (
      <div>
        {/* unmountOnExit:在退出显示时是否卸载这个组件，必填项 */}
        {/* in:通过哪个变量控制显示隐藏 */}
        {/* timeout:切换时的动画时长 */}
        {/* classNames:css的class名前缀 */}
        {/* onEntered:显示成功只后的回调函数 */}
        {/* onExited:隐藏成功只后的回调函数 */}
        <CSSTransition
          unmountOnExit
          in={this.state.isShow}
          timeout={2000}
          classNames="react"
          onEntered={()=>this.setState({btnTxt: '隐藏'})}
          onExited={()=>this.setState({btnTxt: '显示'})}
        >
          <h1>hello react</h1>
        </CSSTransition>
        <button onClick={()=>this.setState({isShow: !this.state.isShow})}>{this.state.btnTxt}</button>
      </div>
    )
  }
}
